<template>
  <el-form ref="form" :model="form" label-width="180px" disabled>
    <el-form-item label="产品价格和库存：">
      <el-radio-group v-model="form.standardsType">
        <el-radio :label="0">默认</el-radio>
        <el-radio :label="1">使用产品规格组</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="form.standardsType === 0" prop="priceStock">
      <el-table border :data="[{}]">
        <el-table-column label="成本价（元）">
          <el-input v-model="form.costPrice" placeholder="请输入" clearable />
        </el-table-column>
        <el-table-column label="零售价（元）">
          <el-input v-model="form.retailPrice" placeholder="请输入" clearable />
        </el-table-column>
        <el-table-column label="门市价（元）">
          <el-input v-model="form.doorMarketPrice" placeholder="请输入" clearable />
        </el-table-column>
        <el-table-column label="库存">
          <el-input v-model="form.dailyInventory" placeholder="请输入" clearable />
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item v-if="form.standardsType === 1" label="规格组和规格值：">
      <el-select v-model="form.skuUnit" clearable>
        <el-option
          v-for="item in unitListOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="form.standardsType === 1">
      <el-table border :data="form.shopProductStandardsBaseVOS">
        <el-table-column label="产品规格">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="成本价（元）">
          <template slot-scope="scope">
            <el-input v-model="scope.row.costPrice" placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="零售价（元）">
          <template slot-scope="scope">
            <el-input v-model="scope.row.retailPrice" placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="门市价（元）">
          <template slot-scope="scope">
            <el-input v-model="scope.row.doorMarketPrice" placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="库存">
          <template slot-scope="scope">
            <el-input v-model="scope.row.dailyInventory" placeholder="请输入" clearable />
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="下单数量：">
      <el-radio-group v-model="form.orderQuantity">
        <el-radio :label="0">不限</el-radio>
        <el-radio :label="1">限制</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="form.orderQuantity === 1" label="">
      <el-col :span="20">
        每次下单，最少
        <el-input v-model="form.leastQuantity" placeholder="请输入" class="min-select" />
        最多
        <el-input v-model="form.mostQuantity" placeholder="请输入" class="min-select" />
      </el-col>
    </el-form-item>
    <el-form-item label="退款规则：">
      <el-radio-group v-model="form.returnTicketRule">
        <el-radio :label="0">随时退</el-radio>
        <el-radio :label="1">有条件退</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script>
import { UNIT_LIST } from '@/utils/enum'

export default {
  name: 'Step2',
  components: {},
  props: {
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      unitListOptions: UNIT_LIST,
      form: {
        standardsType: 0,
        skuUnit: '',
        costPrice: '',
        retailPrice: '',
        doorMarketPrice: '',
        dailyInventory: '',
        orderQuantity: 0,
        leastQuantity: '',
        mostQuantity: '',
        returnTicketRule: 0,
        shopProductStandardsBaseVOS: [
          { name: '', costPrice: '', retailPrice: '', doorMarketPrice: '', dailyInventory: '' }
        ]
      }
    }
  },

  created() {
    const {
      standardsType,
      skuUnit,
      costPrice,
      retailPrice,
      doorMarketPrice,
      dailyInventory,
      orderQuantity,
      leastQuantity,
      mostQuantity,
      returnTicketRule,
      shopProductStandardsBaseVOS
    } = this.formDetail
    this.form = {
      standardsType,
      skuUnit,
      costPrice,
      retailPrice,
      doorMarketPrice,
      dailyInventory,
      orderQuantity,
      leastQuantity,
      mostQuantity,
      returnTicketRule,
      shopProductStandardsBaseVOS
    }
  },

  methods: {}
}
</script>
<style lang="scss" scoped>
.min-select {
  width: 110px;
  padding: 0 10px;
}
</style>
